<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BlueVideo视频创作</title>
	<link rel="icon" href="img/title.ico" type="image/x-icon">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap" rel="stylesheet">

    <!-- Css Styles -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <style type="text/css">
    a{
    	text-decoration: none;
    }
    </style>
</head>
<body>
    <!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>
    
    <sql:setDataSource var="snapshot" driver="com.mysql.cj.jdbc.Driver"
	url="jdbc:mysql://localhost:3306/${ SqlName }?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC"
	user="${ SqlUser }"  password="${ SqlPass }"/>

    <!-- Header Section Begin -->
    <header class="header-section" style="position: fixed;top: 0;z-index: 99;width: 100%;">
        <div class="nav-item" style="position: relative;">
            <div class="container">
                <div class="nav-depart" style="position: fixed;left: 0;">
                    <div class="depart-btn">
                        <i class="ti-menu"></i>
                        <span><span style="color: #8fb0db;">Blue</span> VIDEO</span>
                        <ul class="depart-hover">
                            <li><a href="BlueVideoColle">我的收藏</a></li>
                            <li><a href="#">展览演出</a></li>
                            <li><a href="#">历史记录</a></li>
                        </ul>
                    </div>
                </div>
                <nav class="nav-menu mobile-menu">
                    <ul style="margin-left: 291px;">
                        <li><a href="BlueVideo">首页</a></li>
                        <li><a href="BlueVideoRec" style="border: none;">推荐</a></li>
                        <li>
                            <form action="SelectVideo" method="get">
                                <input class="primary-btn" type="text" id="username" name="selectvideo" style="margin-left:10px;background-color: #fff;color: black;border: none;">
                                <input class="primary-btn" type="submit" value="搜索" style="margin-right: 10px;margin-left: -4px;margin-top: 5px;border: none;">
                            </form>
                        </li>
                    </ul>
                    <ul style="position: fixed;right: -20px;">
                        <c:if test="${ user.user_name==null }">
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            未登录
	                        </a>
	                        	<ul class="dropdown">
	                                <li><a href="BlueVideoLogin">去登录</a></li>
	                                <li><a href="BlueVideoReg">去注册</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                        <c:if test="${ user.user_name!=null }">
                        <li>
                        	<a href="BlueVideoAdd">创作视频</a>
                        </li>
                        	<li style="position: relative;"><a href="#" style="width: 100%;display: block;">
                            <img src="img/UserImg/${ user.user_img }" style="position: absolute;top: 0;left: -20%;width: 38%;border-radius:100%;">
                            ${ user.user_name }
                            </a>
	                            <ul class="dropdown">
	                                <li><a href="BlueVideoUserIndex">个人信息</a></li>
	                                
	                                <li style="position: relative;">
	                                <a href="BlueVideoUserMsg">信息</a>
	                                <sql:query dataSource="${snapshot}" var="resultusermsgsum">
									SELECT COUNT(msg_log) AS usermsgsum FROM user_msg WHERE user_id = ${ user.user_id } AND msg_log = 1;
									</sql:query>
									
									<c:forEach var="rowusermsgsum" items="${ resultusermsgsum.rows }">
									<c:if test="${ rowusermsgsum.usermsgsum > 0 }">
									<div style="position: absolute;left:65px;top: 12px;background: red;border-radius: 50%;color: #fff;">
	                                	<div style="width: 25px;text-align:center;">${ rowusermsgsum.usermsgsum }</div>
	                                </div>
									</c:if>
	                                </c:forEach>
	                                </li>
	                                
	                                <li><a href="BlueVideoSeeUser?SeeUserid=${ user.user_id }">动态</a></li>
	                                <li><a href="BlueVideoUserMyVideo">我的视频</a></li>
	                                <li><a href="BlueVideoUserOut" style="color: #aaa000">退出登录</a></li>
	                            </ul>
	                        </li>
                        </c:if>
                    </ul>
                </nav>
                <div id="mobile-menu-wrap"></div>
            </div>
        </div>
    </header>
    <!-- Header End -->

    <!-- Breadcrumb Section Begin -->
    <div class="breacrumb-section" style="margin-top: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-text product-more">
                        上传视频
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Section Begin -->

    <!-- Shopping Cart Section Begin -->
    <section class="checkout-section spad">
        <div class="container">
            <form action="AddVideo" class="checkout-form" method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-lg-6">
                        <h4>视频上传信息</h4>
                        <div class="row">
                            <div class="col-lg-12">
                                <label for="cun-name">视频标题<span>*</span></label>
                                <input type="text" id="cun-name" name="videoname" >
                            </div>
                            <div class="col-lg-12">
                                <label for="cun">视频介绍</label><br>
                                <textarea name="videotext" style="width: 100%;border: 2px solid #ececea;" rows="5"></textarea>
                            </div>
                            <div class="col-lg-12">
                                <P class="site-btn place-btn" style="margin: 2% 0;background: #518ee9;border: 2px solid #a3c8f3;z-index: 1;">点击上传视频封面</P>
                                <input type="file" name="videoimg" id="imageInput" accept="image/*" style="border: none;position: absolute;z-index: 20;left: 0;top: 25px;opacity: 0;">
                                <div id="imageContainer"></div>
                            </div>
                            <div class="col-lg-12">
                                <p class="site-btn place-btn" style="margin: 2% 0;background: #518ee9;border: 2px solid #a3c8f3;width: 33%;">选择视频文件</p>
                                <input type="file" name="videosrc" accept="video/*" style="border: none;position: absolute;left: 33%;top: 30%;">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="place-order">
                            <h4>视频创作者信息</h4>
                            <div class="order-total">
                                <ul class="order-table">
                                    <li style="position: relative;"> ${ user.user_name }
                                        <span style="display: block;position: absolute;right: -22%;top: -20%;">
                                        <img src="img/UserImg/${ user.user_img }" style="width: 30%;border-radius:50% ;">
                                        </span>
                                    </li>
                                    <li class="fw-normal">创作者账号 <span>${ user.user_number }</span></li>
                                    <li class="fw-normal">创作者ID <span>UID:${ user.user_id }</span></li>
                                    <li class="fw-normal" style="position: relative;">视频标签 <span><input style="position: absolute; right:0;width: 100px;top:5px;" value="" name="biaoqian"></span></li>
                                    <li class="fw-normal" style="opacity: 0;;"></li>
                                    <li class="fw-normal" style="opacity: 0;;"></li>
                                    <li class="fw-normal" style="opacity: 0;;"></li>

                                    <input type="text" name="videouser" value="${ user.user_name }" style="display: none;">
                                    <input type="text" name="userid" value="${ user.user_id }" style="display: none;">
                                </ul>
                                <div class="order-btn">
                                    <button type="submit" class="site-btn place-btn">上传视频</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- Shopping Cart Section End -->

    <!-- Js Plugins -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/jquery.nice-select.min.js"></script>
    <script src="js/jquery.zoom.min.js"></script>
    <script src="js/jquery.dd.min.js"></script>
    <script src="js/jquery.slicknav.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/main.js"></script>
    <script>
           const imageInput = document.getElementById('imageInput');
           const imageContainer = document.getElementById('imageContainer');
           imageInput.addEventListener('change', () => {
           const file = imageInput.files[0];
           if (file) {
           const reader = new FileReader();
           reader.onload = function (e) {
               const img = document.createElement('img');
               img.src = e.target.result;
               imageContainer.innerHTML = '';
               imageContainer.appendChild(img);
           };
           reader.readAsDataURL(file);
           }
           });
    </script>
</body>
</html>